<template>
  <section class="navList">
    <header>
      <img :src="userInfo?.portrait" alt="">
    </header>
    <span @click="change(0)" :class="pageIndex === 0 ? 'active' : null">
      <img src="local-media://msg.png" alt="" />
    </span>
    <span @click="change(1)" :class="pageIndex === 1 ? 'active' : null">
      <img src="local-media://friend.png" alt="" />
    </span>
    <el-popover placement="right-start" :width="100" trigger="click">
      <section class="sets">
        <!-- <div>
          <img src="local-media://setting/feedback.png" alt="" />
          <span>意见反馈</span>
        </div>
        <div>
          <img src="local-media://setting/info.png" alt="" />
          <span>关于</span>
        </div> -->
        <div>
          <img src="local-media://setting/out.png" alt="" />
          <span @click="loginout">退出登录</span>
        </div>
      </section>
      <template #reference>
        <img :class="pageIndex === 1 ? 'active' : null" src="local-media://meun.png" alt="" class="setting" />
      </template>
    </el-popover>
  </section>
</template>
<script >
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from "vue-router"
import { enterMain, enterLogin } from '@/tool'
export default defineComponent({
  setup (props, { emit }) {
    const store = useStore()
    const router = useRouter()
    const pageIndex = computed(() => store?.state?.pageIndex)
    const userInfo = computed(() => store?.state?.userInfo)
    const change = (index) => {
      store.commit('savePageIndex', index)
      if (index === 1) store.dispatch('checkApplyList')

    }
    const loginout = () => {
      window.localStorage.setItem('Token', '')
      window.localStorage.removeItem('userId')
      enterLogin()
      router.replace('/login')
    }
    return {
      userInfo,
      change,
      pageIndex,
      loginout
    }
  }
})
</script>

<style scoped lang="less">
.navList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #01E9E9 linear-gradient(0deg, #009BFD 8%, #00E8E8 100%);
  opacity: 1;

  >header {
    width: 60px;
    height: 60px;
    // background-color: #fff;
    margin-top: 54px;
    margin-bottom: 116px;

    >img {
      width: 60px;
      height: 60px;
      opacity: 1;
      border: 3px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }
  }

  >span {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    cursor: pointer;
    -webkit-app-region: no-drag;

    &.active {
      background: rgba(0, 126, 166, 0.3);
    }


    >img {
      width: 32px;
      object-fit: cover;
    }
  }

  .setting {
    margin-top: auto;
    -webkit-app-region: no-drag;
    margin-bottom: 40px;
  }
}

.sets {
  display: flex;
  flex-direction: column;
  padding: 0 10px;

  >div {
    display: flex;
    height: 37px;
    align-items: center;
    cursor: pointer;

    >img {
      height: 18px;
    }

    >span {
      font-size: 14px;

      font-weight: 500;
      color: #242424;
      margin-left: 6px;
    }
  }
}
</style>
